<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>太阳能发电系统实时监控 - 仪表盘</title>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <link rel="stylesheet" href="css/common.css">
  <link rel="stylesheet" href="css/dashboard.css">
  <!-- 引入字体图标库 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/css/all.min.css">
</head>
<body>
  <div id="app">
    <!-- 主容器 -->
    <div class="solar-app">
      <!-- 顶部导航栏 -->
      <header class="app-header">
        <div class="app-title">
          <!-- <img src="assets/透明底Logo.png" alt="太阳能发电监控系统" class="app-logo"> -->
          <h1>独立式家庭供电自发自用系统</h1>
        </div>
        <div class="last-update">最后更新: {{ lastUpdateTime }}</div>
      </header>

      <!-- 导航菜单 -->
      <div class="nav-menu">
        <div class="nav-item" data-page="index">
          <i class="fas fa-tachometer-alt"></i>
          <div>仪表盘</div>
        </div>
        <div class="nav-item" data-page="weather">
          <i class="fas fa-cloud-sun"></i>
          <div>天气</div>
        </div>
        <div class="nav-item" data-page="statistics">
          <i class="fas fa-chart-bar"></i>
          <div>统计</div>
        </div>
        <div class="nav-item" data-page="settings">
          <i class="fas fa-cog"></i>
          <div>设置</div>
        </div>
      </div>

      <!-- 设备控制中心 -->
      <section class="control-center card">
        <h2>设备控制中心</h2>
        <div class="power-button-container">
          <button 
            :class="['power-button', isDeviceOn ? 'on' : 'off']" 
            @click="togglePower"
            :title="isDeviceOn ? '关闭设备' : '开启设备'"
            :aria-label="isDeviceOn ? '关闭设备' : '开启设备'">
            <i class="fas fa-power-off"></i>
          </button>
          <span class="power-status">{{ isDeviceOn ? '运行中' : '已关闭' }}</span>
        </div>
      </section>

      <!-- 今日数据卡片 -->
      <section class="dashboard-summary">
        <div class="data-card" v-for="(item, index) in summaryData" :key="index">
          <div class="card-icon">
            <i :class="item.icon"></i>
          </div>
          <div class="card-content">
            <div class="card-title">{{ item.title }}</div>
            <div>
              <span class="card-value">{{ item.value }}</span>
              <span class="card-unit">{{ item.unit }}</span>
            </div>
            <div class="card-secondary">{{ item.secondary }}</div>
          </div>
        </div>
      </section>

      <!-- 工作状态监控 -->
      <section class="status-monitor card">
        <h2>工作状态监控</h2>
        <div class="status-cards">
          <div class="status-card" :class="voltageCardClass">
            <div class="status-icon">
              <i class="fas fa-bolt"></i>
            </div>
            <div class="status-info">
              <h4>输出电压</h4>
              <div class="status-value">{{ statusData.voltage }}V</div>
            </div>
          </div>

          <div class="status-card" :class="temperatureCardClass">
            <div class="status-icon">
              <i class="fas fa-thermometer-half"></i>
            </div>
            <div class="status-info">
              <h4>组件温度</h4>
              <div class="status-value">{{ statusData.temperature }}°C</div>
            </div>
          </div>

          <div class="status-card" :class="efficiencyCardClass">
            <div class="status-icon">
              <i class="fas fa-tachometer-alt"></i>
            </div>
            <div class="status-info">
              <h4>逆变器效率</h4>
              <div class="status-value">{{ statusData.efficiency }}%</div>
            </div>
          </div>
        </div>
      </section>
    </div>

    <!-- 电源操作确认对话框 -->
    <div class="dialog-overlay" v-if="showPowerDialog">
      <div class="dialog-content">
        <h3>{{ isDeviceOn ? '确认关闭设备?' : '确认开启设备?' }}</h3>
        <p>{{ isDeviceOn ? '关闭设备将停止发电和数据记录' : '开启设备将开始发电和数据记录' }}</p>
        <div class="dialog-buttons">
          <button class="cancel-btn" @click="cancelPowerAction" title="取消操作">取消</button>
          <button class="confirm-btn" @click="confirmPowerAction" title="确认操作">确认</button>
        </div>
      </div>
    </div>

    <!-- 系统报警弹窗 -->
    <div class="alert-overlay" v-if="showAlert">
      <div class="alert-content">
        <div class="alert-icon">
          <i class="fas fa-exclamation-triangle"></i>
        </div>
        <h3>系统报警</h3>
        <p>{{ alertMessage }}</p>
        <button class="alert-btn" @click="acknowledgeAlert" title="确认报警">我知道了</button>
      </div>
    </div>
  </div>

  <!-- 引入必要的JS库 -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.0/dist/chart.min.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="js/common.js"></script>
  <script src="js/dashboard.js"></script>
</body>
</html>